<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="考官姓名" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="考官姓名"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="queryParams.phone"
            placeholder="手机号"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="执考专业" prop="status">
          <el-select
            v-model="queryParams.exam_major"
            placeholder="全部"
            clearable
            class="!w-[100px]"
          >
            <el-option :value="1" label="朗诵" />
            <el-option :value="2" label="主持" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="全部"
            clearable
            class="!w-[100px]"
          >
            <el-option :value="1" label="正常" />
            <el-option :value="0" label="禁用" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="filter-item" type="primary" @click="handleQuery">
            <i-ep-search />
            搜索
          </el-button>
          <el-button @click="handleResetQuery">
            <i-ep-refresh />
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never" class="table-container">
      <template #header>
        <div class="flex-x-between">
          <div>
            <el-button
              v-hasPerm="['active:examiner:add']"
              type="success"
              @click="handleOpenDialog(undefined)"
            >
              <i-ep-plus />
              新增
            </el-button>
            <el-button
              v-hasPerm="['examiner:examiner:delete']"
              type="danger"
              :disabled="ids.length === 0"
              @click="handleDelete()"
            >
              <i-ep-delete />
              删除
            </el-button>
          </div>
          <div>
            <el-button
              v-hasPerm="['examiner:examiner:import']"
              type="default"
              @click="handleOpenImportant()"
            >
              <i-ep-upload />
              导入
            </el-button>
            <el-button
              v-hasPerm="['examiner:examiner:export']"
              type="default"
              @click="handleOpenExport()"
            >
              <i-ep-download />
              导出
            </el-button>
          </div>
        </div>
      </template>

      <el-table
        v-loading="loading"
        :data="ExaminerList"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        @selection-change="handleSelectionChange"
        :center="true"
      >
        <!--        <el-table-column type="selection" width="55" align="center" />-->
        <el-table-column prop="name" label="考官姓名" min-width="100" />
        <el-table-column prop="gender" label="性别" min-width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.gender == 1" type="success">男</el-tag>
            <el-tag v-if="scope.row.gender == 2" type="danger">女</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" min-width="120" />
        <el-table-column
          prop="school"
          label="毕业院校"
          min-width="160"
          max-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          prop="job_title"
          label="职称"
          min-width="120"
          max-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="major"
          label="所学专业"
          min-width="140"
          max-width="140"
          show-overflow-tooltip
        />
        <el-table-column prop="exam_major" label="执考专业" min-width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.exam_major == 1" type="success">
              朗诵
            </el-tag>
            <el-tag v-if="scope.row.exam_major == 2" type="success">
              主持
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="edu_back" label="学历" min-width="80">
          <template #default="scope">
            <el-tag v-if="scope.row.edu_back == 1" type="success">专科</el-tag>
            <el-tag v-if="scope.row.edu_back == 2" type="success">本科</el-tag>
            <el-tag v-if="scope.row.edu_back == 3" type="success">
              研究生
            </el-tag>
            <el-tag v-if="scope.row.edu_back == 4" type="success">硕士</el-tag>
            <el-tag v-if="scope.row.edu_back == 5" type="success">博士</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="work_unit"
          label="工作单位"
          min-width="140"
          max-width="140"
          show-overflow-tooltip
        />
        <el-table-column prop="status" label="状态" min-width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="100">
          <template #default="scope">
            <el-button
              v-hasPerm="['active:examiner:edit']"
              type="primary"
              link
              size="small"
              @click.stop="handleOpenDialog(scope.row.parentId, scope.row.id)"
            >
              <i-ep-edit />
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>

    <el-drawer
      v-model="dialog.visible"
      :title="dialog.title"
      size="500px"
      @closed="handleCloseDialog"
    >
      <el-form
        ref="institutionFormRef"
        :model="formData"
        :rules="rules"
        label-width="80px"
        label-position="top"
      >
        <el-form-item label="考官姓名" prop="name">
          <el-input v-model="formData.name" placeholder="输入考官姓名" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="formData.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="formData.phone"
            placeholder="请输入手机号"
            maxlength="11"
          />
        </el-form-item>
        <el-form-item label="身份证号" prop="id_card">
          <el-input
            v-model="formData.id_card"
            placeholder="请输入身份证号"
            maxlength="18"
          />
        </el-form-item>
        <el-form-item label="毕业院校" prop="school">
          <el-input v-model="formData.school" placeholder="请输入毕业院校" />
        </el-form-item>
        <el-form-item label="学历" prop="edu_back">
          <el-select v-model="formData.edu_back">
            <el-option :value="1" label="专科" />
            <el-option :value="2" label="本科" />
            <el-option :value="3" label="研究生" />
            <el-option :value="4" label="硕士" />
            <el-option :value="5" label="博士" />
          </el-select>
        </el-form-item>
        <el-form-item label="职称" prop="job_title">
          <el-input v-model="formData.job_title" placeholder="请输入职称" />
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-input v-model="formData.major" placeholder="请输入专业名称" />
        </el-form-item>
        <el-form-item label="执考专业" prop="exam_major">
          <el-select v-model="formData.exam_major">
            <el-option :value="1" label="朗诵" />
            <el-option :value="2" label="主持" />
          </el-select>
        </el-form-item>
        <el-form-item label="工作单位" prop="work_unit">
          <el-input v-model="formData.work_unit" placeholder="请输入工作单位" />
        </el-form-item>
        <el-form-item label="所在地区" prop="area">
          <AreaCascader v-model="formData.area" @update:model-value="setArea" />
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="formData.address" placeholder="请输入详细地址" />
        </el-form-item>
        <el-form-item label="考官状态">
          <el-radio-group v-model="formData.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">冻结</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="handleCloseDialog">取 消</el-button>
        </div>
      </template>
    </el-drawer>
    <!--    考官导入弹窗-->
    <examiner-import
      v-model:visible="importDialogVisible"
      @import-success="handleOpenImportDialogSuccess"
    />
  </div>
</template>

<script setup lang="ts">
import ImageUpload from "@/components/Upload/ImageUpload.vue";
import AreaAPI from "@/api/area";
defineOptions({
  name: "Examiner",
  inheritAttrs: false,
});

import ExaminerAPI, {
  ExaminerVO,
  ExaminerForm,
  ExaminerQuery,
} from "@/api/examiner";

const areaOptions = reactive({
  province: [],
  city: [],
  districts: [],
});
const queryFormRef = ref(ElForm);
const institutionFormRef = ref(ElForm);

const loading = ref(false);
const ids = ref<number[]>([]);
const dialog = reactive({
  title: "",
  visible: false,
});
const total = ref(0);
const queryParams = reactive<ExaminerQuery>({
  pageNum: 1,
  pageSize: 10,
});
const ExaminerList = ref<ExaminerVO[]>();
const importDialogVisible = ref(false);
const formData = reactive<ExaminerForm>({
  id: undefined,
  exam_major: 1,
  gender: 1,
  edu_back: 2,
  area: [],
  status: 1,
});
const license = ref(["https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg"]);
const rules = reactive({
  id_card: [{ required: true, message: "身份证号不能为空", trigger: "change" }],
  school: [{ required: true, message: "毕业院校不能为空", trigger: "change" }],
  name: [{ required: true, message: "考官名称不能为空", trigger: "blur" }],
  area: [{ required: true, message: "所在地区不能为空", trigger: "blur" }],
  address: [{ required: true, message: "详细地址不能为空", trigger: "blur" }],
  major: [{ required: true, message: "专业不能为空", trigger: "blur" }],
  edu_back: [{ required: true, message: "学历不能为空", trigger: "blur" }],
  job_title: [{ required: true, message: "职称不能为空", trigger: "blur" }],
  work_unit: [{ required: true, message: "工作单位不能为空", trigger: "blur" }],
  phone: [{ required: true, message: "联系电话不能为空", trigger: "blur" }],
});

/** 查询考官 */
function handleQuery() {
  loading.value = true;
  ExaminerAPI.getList(queryParams).then((data) => {
    ExaminerList.value = data["list"];
    total.value = data["total"];
    loading.value = false;
  });
}

/** 重置查询 */
function handleResetQuery() {
  queryFormRef.value.resetFields();
  handleQuery();
}

/**
 * 打开考官弹窗
 *
 * @param parentId 父考官ID
 * @param ExaminerId 考官ID
 */
async function handleOpenDialog(parentId?: number, ExaminerId?: number) {
  const areaData = await AreaAPI.getList();
  areaOptions.province = [...areaData];
  dialog.visible = true;
  if (ExaminerId) {
    dialog.title = "修改考官";
    ExaminerAPI.getFormData(ExaminerId).then((data) => {
      Object.assign(formData, data);
      formData.area = [
        data["province_code"],
        data["city_code"],
        data["district_code"],
      ];
      formData.license = data["license"] ? [data["license"]] : [];
      formData.legalFace = data["legalFace"] ? [data["legalFace"]] : [];
      formData.legalBack = data["legalBack"] ? [data["legalBack"]] : [];
      formData.brand = data["brand"] ? [data["brand"]] : [];
      console.log(formData);
    });
  } else {
    dialog.title = "新增考官";
  }
}

/** 提交考官表单 */
function handleSubmit() {
  institutionFormRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      const ExaminerId = formData.id;
      if (ExaminerId) {
        ExaminerAPI.update(ExaminerId, formData)
          .then(() => {
            ElMessage.success("修改成功");
            handleCloseDialog();
            handleQuery();
          })
          .finally(() => (loading.value = false));
      } else {
        ExaminerAPI.add(formData)
          .then(() => {
            ElMessage.success("新增成功");
            handleCloseDialog();
            handleQuery();
          })
          .finally(() => (loading.value = false));
      }
    }
  });
}

/** 关闭弹窗 */
function handleCloseDialog() {
  dialog.visible = false;

  institutionFormRef.value.resetFields();
  institutionFormRef.value.clearValidate();

  formData.id = undefined;
  formData.parentId = 1;
  formData.status = 1;
  formData.sort = 1;
  formData.area = [];
  formData.license = [];
  formData.legalFace = [];
  formData.lagalBack = [];
  formData.brand = [];
}
function setArea($event) {
  console.log($event);
  formData.area = [$event.province, $event.city, $event.district];
}
function handleOpenImportant() {
  importDialogVisible.value = true;
}
onMounted?.(() => {
  handleQuery();
});
</script>
